<template>
  <div>
    <el-dialog
      :title="$t('告警信息')"
      ref="warningCustom"
      :visible="dialogVisible"
      width="505px"
      top="30vh"
      :close-on-click-modal="false"
      class="warningInfo"
      @close="close"
    >
      <template slot="title">
        <span style="font-size: 18px; line-height: 1; color: #303133">{{
          $t("告警信息")
        }}</span>
        <el-tooltip class="item" effect="light" placement="right">
          <div slot="content">
            {{
              $t(
                "告警信息，仅仅提示用户有些配置不支持，不影响整体配置下发与功能使用"
              )
            }}
          </div>
          <svg-icon
            icon-class="question"
            style="color: #666; font-size: 16px"
          />
        </el-tooltip>
      </template>
      <span style="white-space: pre-wrap">{{ msg }}</span
      ><br />
      <el-table
        size="mini"
        ref="multipleTable"
        v-if="tableList && tableList.length > 0"
        :data="tableList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          :label="$t('引用模块名称')"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <tooltip
              :copyText="modeList[scope.row.name] || scope.row.name"
              class="wid190"
            >
            </tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          :label="$t('引用策略名称')"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <tooltip :copyText="scope.row.value" class="wid190"> </tooltip>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" size="small">{{
          $t("确 定")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: [
    "addr_group_list",
    "info",
    "tableData",
    "tableList",
    "editVisible",
    "msg",
    "multipleSelection",
    "modeList",
    "dialogVisible",
  ],
  data() {
    return {};
  },
  watch:{
    dialogVisible(value) {
      if(value) {
       this.$nextTick(() => {
        this.$refs.warningCustom.$el.querySelector('.el-dialog__wrapper .el-dialog .el-dialog__body').classList.add('my-warning-dialog')
       })
      }
    }
  },
  methods: {
    close() {
      this.$emit("visibleSubmit");
    },
    handleSubmit() {
      this.$emit("visibleSubmit");
    },
  },
};
</script>

<style scoped lang="less">
.warningInfo {
  /deep/ .el-dialog__body {
    padding: 10px 15px !important;
  }
  /deep/ .el-dialog__header {
    padding: 15px 15px 10px !important;
  }
  /deep/ .el-dialog__footer {
    padding: 5px 15px 10px !important;
  }
}
</style>
